<template>
	<u-popup v-model="value" mode="bottom" border-radius="20" height="auto" @close="close" :popup="false" :safeAreaInsetBottom="false">
		<view class="checkbox-popup-content" :style="{ height: height + 'px' }">
			<view class="checkbox-popup-header">
				<view class="checkbox-popup-header-btn"></view>
				<view class="checkbox-popup-header-title">{{ title }}</view>
				<view class="checkbox-popup-header-btn" @tap.stop="close">取消</view>
			</view>
			<scroll-view class="checkbox-popup-body" :style="{ height: bodyHeight + 'px' }">
				<view class="checkbox-popup-group">
					<view class="checkbox-popup-item" :class="{ checked: item.check }" @tap.stop="checkItem" :data-index="index" v-for="(item, index) in checkboxList" :key="index">{{ item.name }}</view>
				</view>
			</scroll-view>
			<view class="checkbox-bottom">
				<view class="checkbox-bottom-btn"><u-button type="main-theme" shape="circle" size="default" @click="confirm">确定</u-button></view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	props: {
		height: {
			default: null,
			type: Number
		},
		value: {
			default: false,
			type: Boolean
		},
		title: {
			default: '多选',
			type: String
		},
		list: {
			default() {
				return [];
			},
			type: Array
		},
		defaultValue: {
			default: '',
			type: String
		}
	},
	data() {
		return {
			defaultList: []
		};
	},
	watch: {
		defaultValue: {
			handler: function(newValue) {
				let defaultList = [];
				if (newValue) {
					defaultList = newValue.split(',');
				}
				this.defaultList = defaultList;
			},
			immediate: true
		}
	},
	computed: {
		bodyHeight: function() {
			return this.height - uni.upx2px(210);
		},
		checkboxList: function() {
			const list = this.list;
			list.map(item => {
				item.check = this.defaultList.indexOf(item.name) >= 0;
				return item;
			});

			return list;
		}
	},
	methods: {
		close() {
			this.$emit('input', false);
		},
		confirm() {
			this.$emit('confirm', { value: this.defaultList });
		},
		checkItem(e) {
			const index = e.currentTarget.dataset.index;
			const name = this.list[index].name;
			const pos = this.defaultList.indexOf(name);
			if (pos >= 0) {
				this.defaultList.splice(pos, 1);
			} else {
				this.defaultList.push(name);
			}
		}
	}
};
</script>

<style lang="scss">
.checkbox-popup-content {
	width: 750rpx;
	background-color: #fff;
	.checkbox-popup-header {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		.checkbox-popup-header-btn {
		}
	}
	.checkbox-popup-body {
		display: block;
		.checkbox-popup-group {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 40rpx 10rpx;
			.checkbox-popup-item {
				padding: 0 35rpx;
				font-size: 25rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				color: $uni-text-color-placeholder;
				border: 1rpx solid $uni-text-color-placeholder;
				margin-right: 20rpx;
				border-radius: 40rpx;
				margin-bottom: 20rpx;
				transition: all 0.2s ease-in-out;
				&.checked {
					background-color: $theme-main-color;
					border-color: $theme-main-color;
					color: #fff;
				}
			}
		}
	}
	.checkbox-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		.checkbox-bottom-btn {
			width: 100%;
		}
	}
}
</style>
